<template>
  <Modal v-model="modalObj.modalShow" title='导入数据' :width='impotModal.width' class="cp_import" :mask-closable="false" >
    <section class="step1"  @click="itemshow=false">
        <p class="title">1. 请按照数据模板的格式准备导入{{modalObj.title}}数据</p>
        <!--<div class="download" @click="downloadTemp()"><i class="icon"></i>下载{{modalObj.title}}数据模板<span v-if="modalObj.title1">-{{modalObj.title1}}</span></div>-->
        <p class="title">2. 请填写好{{modalObj.title}}相关内容</p>
        <!--<div class="tipbox">
          <p>{{modalObj.tip1}}</p>
          <p if="modalObj.tip2">{{modalObj.tip2}}</p>
        </div>-->
        <p class="title">3. 请选择需要导入的数据文件</p>
        <div class="file_warp">
          <input type="file" name="file" :id="updateObj.grid_importfile" class="file_input" @change="getFile">
          <span class="file_button"><Icon type="ios-cloud-upload-outline"></Icon><i>上传文件</i></span>
          <div class="file_namewarp" v-if="impotModal.fileNameShow">
            <p class="file_name">{{ impotModal.fileName }}</p>
            <span class="delicon" @click="delfile"><Icon class="file_del" type="trash-a"></Icon>删除</span>
          </div>
        </div>
        <div class="error-section" v-if="errorModal">
          <p class="error">导入的数据有错误，导入失败，请了解具体错误原因！</p>
          <p class="error">{{ errorMsg }}</p>
          <!--<Button class="btn error-btn" type="info"  @click="downErrorExcel">下载excel</Button>-->
        </div>
        <div class="error-section" v-if="errorModaltitle">
          <p class="error">导入的数据有错误，请检查！</p>
        </div>
    </section>
    <div class="demo-spin-col" v-if="checking">
        <Spin fix>
          <Icon type="load-c" size=22 class="demo-spin-icon-load"></Icon>
          <div class="demo-spin-icon-word">正在校验数据，请稍候...</div>
        </Spin>
    </div>
    <div slot="footer">
      <Button class="btn" type="info" @click="ok">确定</Button>
      <Button class="btn"  @click="cancel">取消</Button>
    </div>
  </Modal>
</template>

<script>
// 	import Rest from '@/rest'
// 	import Api from '@/api'
// 	import Bus from '@/store/bus'
// 	import Helper from '@/helper'
//   import moment from '@/utils/moment'
  export default {
    name: 'upload',
    data () {
      return {
        modal: false,
        loading:true,
        checking:false,
        errorExcel:'',
        errorModal:false,
        errorModaltitle:false,
        errorMsg: '',
        repeatimportip:false,
        importMonth:'',
        impotModal:{
          fileNameShow: false,
	        fileName: "",
          step: 0,
	        stepClass: "step-ul-step0",
	        loading: false,
	        width: 650,
        },
        filter:{

        },
        itemshow:false,
        data:{
          deptIds:'',
        },
        uuid:'',
      }
    },
    created(){
    },
    methods: {
      ok(){
       	var that = this
        var restApi = this.updateObj.api
       // 导入
        var file = document.getElementById(this.updateObj.grid_importfile).files[0];
       if(!file) return this.$message.error('请导入模板！');
        var formData = new FormData();
        formData.append('excelFile', file);
        formData.append('code', this.updateObj.code);
        formData.append('appName', this.updateObj.appName);
        formData.append('appVersion', this.updateObj.appVersion);
        // formData.append('filename', file);
    		this.modalObj.modalShow = true
        this.checking = true
        Rest.upload(restApi,formData).done((res)=>{
          that.checking = false
          if (Helper.isSuccess(res)) {
           this.$Message.info('导入成功');
            that.modalObj.modalShow = false
            that.reset()
            Bus.$emit("dataReload",this.updateObj.grid_importfile)
          }else{
            if (res.status.code == '1') {
              if(res.status.msg.indexOf("MSG_TOKEN=")>-1){
               	this.errorModal = true;
                that.uuid= res.status.msg.slice(10);
                that.errorMsg = res.status.msg;
                this.$Message.info(res.status.msg);
              }else {
               this.errorModal = true;
               // this.$Message.info('导入出错，请检查后重新上传文件');
               that.errorMsg = res.status.msg;
               this.$Message.info(res.status.msg);
              }
            }
          }
        })
      },
      //覆盖当月老数据
      // repeatCommit(){
      //   debugger

      // },
      // 取消
      cancel(){
        this.modalObj.modalShow = false
      },
      // 重置
      reset(){
        this.errorExcel = false
        this.delfile()
      },
      // 上传文件内容
	    getFile() {
	      function getFileName(o) {
	        var pos = o.lastIndexOf("\\");
	        return o.substring(pos + 1);
	      }
	      var that = this;
	      var file = $('#' + this.updateObj.grid_importfile).val();
					that.impotModal.fileName = getFileName(file);
	      if (that.impotModal.fileName) {
	        that.impotModal.fileNameShow = true;
	      } else {
	        that.impotModal.fileNameShow = false;
        }
        this.errorModal = false
	    },
      // 下载模板
	    downloadTemp() {

       var that = this;
        var restApi = this.templetObj.api
       var token = Helper.get('token')
       that.filter.token=token
       Helper.globalLoading_show();
       var purl=Rest.getExportPath(restApi)
       var param =that.filter
       if(param){
            var p = "?";
            for(var k in param){
              p = p + k + "=" + param[k] + "&";
            }
            p=p.substr(0,p.length-1);
            purl += p;
          };
       window.open(purl);
       setTimeout(() => {
         Helper.globalLoading_hide();
       }, 3000);
      },
      downErrorExcel(){
        var that = this;
        var restApi = this.repeatObj.api
        var token = Helper.get('token')
        Helper.globalLoading_show();
        var purl=Rest.getExportPath(restApi)
        var param ={
				uuid:that.uuid,
				token:token
				 }
        if(param){
          var p = "?";
            for(var k in param){
            p = p + k + "=" + param[k] + "&";
            }
            p=p.substr(0,p.length-1);
          purl += p;
            }
					window.open(purl,'_self');
					setTimeout(() => {
						Helper.globalLoading_hide();
					 }, 3000);
      },
      ErrorCancel(){
        this.errorModal = false
      },
      // 删除文件
	    delfile() {
	      $('#'+this.updateObj.grid_importfile).val("");
	      this.impotModal.fileNameShow = false;
	      this.impotModal.fileName = "";
	    },
    },
    props: {
      modalObj:{
        type: Object,
        default: function() {
          return {
            modalShow: false,
            title: '导入数据'
          }
        }
      },
      title:{
        type: String,
        default: "导入数据"
      },
      //模板对象，包括Api和parms
      templetObj: {
      	type: Object,
      	default: function() {
      		return {
	      		api:'',
	      		parms:{}
      		}
      	}
      },
      // 上传接口对象
      updateObj: {
        type: Object,
      	default: function() {
      		return {
      		  grid_importfile:"",
      		  code:'',
      		  appName:'',
      		  appVersion:'',
	      		api:'',
	      		parms:{}
      		}
      	},
      	// 判断是否重复上传接口
      },
      repeatObj: {
        type: Object,
      	default: function() {
      		return {
	      		api:'',
	      		parms:{}
      		}
      	}
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cp_import {
    .stepwarp {
      position: relative;
      margin: 0 auto;
      margin-bottom: 20px;
      width: 650px;
      ul {
        text-align: center;
        padding-left: 10px;
        font-size: 0;
        li {
          font-size: 14px;
          display: inline-block;
          width: 169px;
          color: #999;
          width: 25%;
          &:nth-child(1){
            text-align:left;
            padding-left: 33px;
          };
          &:nth-child(2){
            text-align:left;
            padding-left: 40px;
          };
          &:nth-child(3){
            text-align:left;
            padding-left: 47px;
          };
        }
        .active {
          color: #333;
        }
      }
      .step_icon {
        display: inline-block;
        width: 100%;
        height: 50px;
        background: url(../assets/images/step.png) no-repeat;
      }
      .step-ul-step0 {
        background-position: -21px -463px;
      }
      .step-ul-step1 {
        background-position: -21px -540px;
      }
      .step-ul-step2 {
        background-position: -21px -617px;
      }
      .step-ul-step3 {
        background-position: -21px -694px;
      }
    }
    .title {
      text-align: left;
      font-size: 15px;
      color: #111;
      padding: 0 20px 20px 80px;
    }
    .download {
      cursor: pointer;
      margin-left: 100px;
      color: #02b0f0;
      text-align: left;
      margin-top: 5px;
      margin-bottom: 20px;
      width: 250px;
      .icon {
        display: inline-block;
        vertical-align: top;
        height: 25px;
        width: 25px;
        background: url(../assets/images/icons.png) no-repeat -430px -114px;
      }
    }
    .file_warp {
      position: relative;
      text-align: left;
      width: 350px;
      height: 70px;
      margin-top: 10px;
      margin-left: 103px;
      overflow: hidden;
      .file_input {
        position: absolute;
        top: 10px;
        left: -100px;
        width: 200px;
        height: 30px;
        background-color: #666;
        cursor: pointer;
        z-index: 2;
        opacity: 0;
        &:hover {
          &~.file_button {
            color: #02b0f0;
            border: 1px solid #02b0f0;
            &>i {
              color: #02b0f0;
            }
          }
        }
      }
      .file_button {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100px;
        height: 30px;
        background-color: #fff;
        border: 1px solid #ccc;
        color: #999;
        border-radius: 3px;
        cursor: pointer;
        text-align: center;
        line-height: 28px;
        &>i {
          margin: 0 2px;
          color: #666;
        }
      }
      .file_namewarp {
        display: inline-block;
        margin-left: 115px;
        padding-left: 50px;
        padding-right: 10px;
        height: 50px;
        background: url(../assets/images/icons.png) no-repeat -427px -189px;
      }
      .file_name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 150px;
      }
      .delicon{
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        .file_del {
          display: inline-block;
          vertical-align: middle;
          font-size: 20px;
          margin-top: -2px;
          margin-right: 4px;
          color: #888;
        }
        &:hover{
          color: #02b0f0;
          .file_del {
            color: #02b0f0
          }
        };
      }
    }
    .step1{
      margin-top: 20px;
      .tipbox{
        margin: 5px 100px 30px;
        color: #999;
      }
    }
    .demo-spin-col {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      text-align: center;
      height: 100px;
      margin-left: -100px;
      margin-top: -50px;
      box-shadow: none;
      border-radius: 3px;
      .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
      }
      .demo-spin-icon-word{
        margin-top: 20px;
        color: #666;
      }
      @keyframes ani-demo-spin {
        from {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(180deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .loding-icon{
        display: inline-block;
        vertical-align: top;
        height: 100px;
        width: 100px;
        background:#666 url(../assets/images/loading.gif);
      }
    }
    .step2{
      height: 200px;
      position: relative;
    }
  }
  .error-modal{
    .ivu-modal-wrap{
      z-index:9999;
    }
    .ivu-modal-body{
      height: 120px;
      line-height: 30px;
      flex-direction: column;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .error-section{
    text-align: left;
    padding-left: 80px;
    padding-bottom:20px;
    line-height:30px;
    .error{
      color: #f93c5c;
    }
    .error-btn{
      width: 100px;
      margin-left:20px;
      margin-top:10px;
    }
  }
  .file-month{
    margin-top:10px;
    margin-bottom:20px;
    padding: 0 20px 0 103px;
  }
   #myId{
        width: 100%;
		height: 36px;
		border: 1px solid #ccc;
		border-radius: 3px;
		line-height: 38px;
	  }
    #myId:hover {
       border:1px solid #02b0f0;
       }
      .treed{
        width:192px;
		height:200px;
		z-index:999;
		border:1px solid #ccc;
		padding-left:10px;
		background:#fff;
	    position: absolute;
		overflow:auto;
	  }
</style>
